<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style scoped>
  /* 容器样式，在每个卡片下方增加一些间距 */
  .ticket-details-container {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .sold-out {
    color: #F56C6C;
    font-weight: bold;
  }

  .seat-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .seat-block {
    display: flex;
    align-items: center;
    margin-right: 24px;
    margin-bottom: 8px;
  }

  .seat-block span {
    margin: 0 8px;
  }

  .seat-block .price {
    margin: 0 8px;
    color: #E6A23C; /* 价格使用橙色突出显示 */
    font-weight: bold;
  }
</style>
<body>
<div id="app">
  <el-container>


    <el-main style="width: 80%; margin: 20px auto; border: 1px solid #ebeef5; border-radius: 8px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="出发地">
                <el-select v-model="searchForm.startStation" filterable placeholder="请选择出发地">
                    <el-option
                            v-for="item in stations"
                            :key="item.nameInEnglish"
                            :label="item.nameInChinese"
                            :value="item.nameInChinese">
                        <span style="float: left">{{ item.nameInChinese }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nameInEnglish }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: center; line-height: 40px;">
            <button class="exchange-btn" @click.prevent="exchangeStation">⇄</button>
          </el-col>
          <el-col :span="10">
            <el-form-item label="到达地">
                <el-select v-model="searchForm.endStation" filterable placeholder="请选择到达地">
                    <el-option
                            v-for="item in stations"
                            :key="item.nameInEnglish"
                            :label="item.nameInChinese"
                            :value="item.nameInChinese">
                        <span style="float: left">{{ item.nameInChinese }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nameInEnglish }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="出发日期">
                <el-date-picker
                        v-model="searchForm.startTime"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="10" :offset="4">
            <el-form-item label=" ">  <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
  <el-container v-if="trainList.length>0">
    <el-header>
      <el-divider></el-divider>
    </el-header>
    <el-main>
      <template>
        <div>
          <div
                  v-for="train in trainList"
                  :key="train.trainNum"
                  class="ticket-details-container"
          >
            <el-descriptions
                    class="margin-top"
                    :title="`${train.trainNum} 车次`"
                    :column="2"
                    border
            >
              <el-descriptions-item label="出发/到达站">
                {{ train.startStation }} → {{ train.endStation }}
              </el-descriptions-item>
              <el-descriptions-item label="总耗时">
                {{ train.duration }}
              </el-descriptions-item>

              <el-descriptions-item label="出发时间">
                  {{ train.startTime }}
              </el-descriptions-item>
              <el-descriptions-item label="到达时间">
                {{ train.endTime }}
              </el-descriptions-item>

                <el-descriptions-item label="席位信息" :span="2">
                    <div class="seat-info-row">
                        <!-- 商务座 -->
                        <div class="seat-block">
                            <strong>商务座:</strong>
                            <span :class="{'sold-out': train.remainClass0 === 0}">
        剩余{{ train.remainClass0 > 0 ? train.remainClass0 : '售罄' }}
      </span>
                            <span class="price">¥{{ Math.round(train.distance * 1.5) }}</span>
                        </div>

                        <!-- 一等座 -->
                        <div class="seat-block">
                            <strong>一等座:</strong>
                            <span :class="{'sold-out': train.remainClass1 === 0}">
        剩余{{ train.remainClass1 > 0 ? train.remainClass1 : '售罄' }}
      </span>
                            <span class="price">¥{{ Math.round(train.distance * 0.8) }}</span>
                        </div>

                        <!-- 二等座 -->
                        <div class="seat-block">
                            <strong>二等座:</strong>
                            <span :class="{'sold-out': train.remainClass2 === 0}">
        剩余{{ train.remainClass2 > 0 ? train.remainClass2 : '售罄' }}
      </span>
                            <span class="price">¥{{ Math.round(train.distance * 0.5) }}</span>
                        </div>

                        <!-- 无座（保留按钮） -->
                        <div class="seat-block">
                            <strong>无座:</strong>
                            <span :class="{'sold-out': train.remainClass3 === 0}">
        剩余{{ train.remainClass3 > 0 ? train.remainClass3 : '售罄' }}
      </span>
                            <span class="price">¥{{ Math.round(train.distance * 0.45) }}</span>
                            <el-button
                                    type="primary"
                                    @click="handleBookTicket(train.id)"
                            >
                                订票
                            </el-button>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </template>
    </el-main>
  </el-container>

</div>

<script src="../../js/axios-0.18.0.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/request.js"></script>

<script>
  new Vue({
    el: '#app',
      mounted(){
          this.selectStations();
      },
    data() {
      return {

        searchForm: {
          startStation: '',
          endStation: '',
          startTime: ''
        },
        stations:[],
        trainList: [

        ],
        pickerOptions: {
          disabledDate(time) {
            // 获取今天的时间（去掉时分秒）
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            // 计算7天后的日期
            const sevenDaysLater = new Date(today);
            sevenDaysLater.setDate(today.getDate() + 7);

            // 禁用今天之前和7天之后的日期
            return time.getTime() < today.getTime() ||
                    time.getTime() > sevenDaysLater.getTime();
          }
        }
      };
    },
    methods: {

      handleBookTicket(id) {
        // 现在我们可以准确地知道用户想订哪个车次的哪种票
        console.log(`准备预订 ${id} 次列车的`);
          localStorage.setItem('bookTicketId',id);
          window.location.href='booking.html';
      },
      handleSelect(key) {
        console.log('菜单选择:', key);
      },
      exchangeStation() {
        const temp = this.searchForm.startStation;
        this.searchForm.startStation = this.searchForm.endStation;
        this.searchForm.endStation = temp;
      },
      search() {
        console.log('搜索条件:', this.searchForm);

        // 这里添加搜索逻辑
        var _this=this;
        axios({
          method:"post",
          url:"http://localhost:8080/dailyRemainTicket/search",
          data: this.searchForm
        }).then(function (resp) {
          _this.trainList=resp.data.data;
          _this.trainList.forEach(train => {
            // 将字符串时间转换为Date对象
            const startTime = new Date(train.startTime);
            const endTime = new Date(train.endTime);

            // 计算时间差（毫秒）
            const diffMs = endTime - startTime;

            // 转换为小时和分钟
            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
            const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));

            // 格式化为"X小时Y分钟"
            train.duration = `${diffHours}小时${diffMinutes}分钟`;
          });
        })
      },
        selectStations(){
            var _this=this;
            axios({
                method:"get",
                url:"http://localhost:8080/station/selectAll",
            }).then(function (resp) {
                if(resp.data.code === 1){
                    _this.stations=resp.data.data;
                }
                else {
                    _this.$message({
                        showClose: true,
                        message: resp.data.msg,
                        type: 'error'
                    });
                }
            })
        },

    }
  });
</script>
</body>
</html>